<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    title="新增打烊规则"
    width="650px"
  >
    <el-form
      ref="addEditRef"
      :model="modelValue.form"
      :rules="modelValue.rules"
      label-width="100px"
      label-position="right"
      style="margin-top: 12px"
    >
      <el-form-item label="规则编码" prop="number">
        <el-input
          v-model="modelValue.form.number"
          placeholder="请输入规则编码"
          maxlength="64"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="规则名称" prop="name">
        <el-input
          v-model="modelValue.form.name"
          placeholder="请输入打烊规则名称"
          maxlength="64"
          show-word-limit
        />
        <div class="input-suffix">例如：设置清洗模板为日清、周清、月清</div>
      </el-form-item>

      <el-form-item label="是否默认规则">
        <el-radio-group v-model="modelValue.form.enabled">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
        <div class="tip-text">
          温馨提示：设置为默认规则后，若机台没有选择其他打烊规则，则默认使用该规则
        </div>
      </el-form-item>

      <el-form-item label="清洗时长">
        <div class="duration-grid">
          <el-button
            v-for="time in ['3', '10', '20', '30', '40', '50', '80']"
            :key="time"
            :type="modelValue.form.cleanTime === time ? 'primary' : ''"
            @click="selectDuration(time)"
            style="width: 87px; margin: 0 0 0 0"
          >
            {{ time }}s
          </el-button>
        </div>
      </el-form-item>

      <el-form-item label="浸泡时间" prop="soakTime">
        <el-input-number v-model="modelValue.form.soakTime" :min="1" />
        <span class="unit-text">分钟</span>
      </el-form-item>

      <el-form-item label="设备每隔" prop="intervalTime">
        <el-input-number v-model="modelValue.form.intervalTime" :min="1" />
        <span class="unit-text">分钟</span>
      </el-form-item>

      <el-form-item label="冲洗" prop="rinseTime">
        <el-input-number v-model="modelValue.form.rinseTime" :min="1" />
        <span class="unit-text">秒</span>
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          v-model="modelValue.form.remark"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          maxlength="255"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {
  updateFdsBusinessClosingRuleset,
  addFdsBusinessClosingRuleset,
} from "@/api/fds-business-closing-ruleset.api";
const props = defineProps(["modelValue"]);
const addEditRef = ref<FormInstance>();

const selectDuration = (timeKey: string | number) => {
  props.modelValue.form.cleanTime = timeKey;
};
/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form;

  let children = form.restRuleDetails || [];
  children = JSON.stringify(children);
  let formData = {
    number: form.number,
    name: form.name,
    enabled: 0,
    children: children,
  };

  if (!addEditRef.value) return;
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateFdsBusinessClosingRuleset({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel();
            ElMessage({
              message: props.modelValue.title + "修改成功",
              type: "success",
            });
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList();
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: "error",
            });
          });
        return;
      }

      addFdsBusinessClosingRuleset(formData)
        .then((res) => {
          cancel();
          ElMessage({
            message: props.modelValue.title + "新增成功",
            type: "success",
          });
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList();
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: "error",
          });
        });
    }
  });
};

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false;
};
</script>

<style scoped>
.input-suffix {
  color: #999;
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
  color: #df9635;
}

.tip-text {
  font-size: 12px;
  color: #df9635;
  margin-top: 5px;
}

.duration-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.duration-grid :deep(.el-button) {
  padding: 8px 12px;
  margin-bottom: 5px;
}

.unit-text {
  margin-left: 8px;
}

.dialog-footer :deep(.el-button) {
  padding: 10px 24px;
}
</style>
